﻿
$(function () { 

   function getmc(){
       return new Promise(function(resolve, reject){
        $.ajax({
            type: 'get',
            url: "https://static-3440546a-c254-4f15-9a99-d12987be7570.bspapp.com/echarts/js/data.json",
            dataType: 'json',
            success: function (res) {       
                resolve(res)
            },
            fail(err) {
                alert('请求失败')
            }
        }) 
       })
   }
   getmc().then(res=>{
    echarts_5(res.lineData);
    echarts_4(res.bar);
    echarts_31(res.pie)
    echarts_6(res.barPie);
    map(res.map)
   })
    let time_=20000
   
    function map(data) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('map_1'));
        
           // 基于准备好的dom，初始化echarts实例
        //    let myChart = echarts.init(document.getElementById('chart-panel'));
          let option = {
               backgroundColor: 'rgba(0,0,0,0)',
               geo3D: {
                   map: 'fugu',
                   roam: true,
                   regionHeight: 6,
                   boxWidth:70,
                   itemStyle: {

                    borderColor: '#002097',
                       color: 'rgba(15,60,144,1)',
         
                       borderWidth: 0.6,
                       borderColor: 'rgba(84,210,236,.1)' // 地图边配色
                   },
                   groundPlane: {
                       show: false,
                       color: "rgb(12, 20, 38)"
                   },
                   viewControl: {
                       projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                       autoRotate: true, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                       autoRotateDirection: 'ccw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                       autoRotateSpeed: 2, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                       autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                       damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                       rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                       zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                       panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                       panMouseButton: 'middle', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                       rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                       distance: 130, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                       minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                       maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                       alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                       beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                       minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                       maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                       minBeta: -3600000, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                       maxBeta: 3600000, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                       center: [0, -10, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                       animation: false, // 是否开启动画。[ default: true ]
                       animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                       animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
                   },
                   label: {
                       show: true,
                        // 标签的字体样式
                        color: '#fff', // 地图初始化区域字体颜色
                        fontSize: 14, // 字体大小
                        fontWeight: '600',
                        // backgroundColor: 'rgba(255,255,255,.6)' // 字体背景色
                       
   
                   },
                   shading: 'lambert',
   
                   light: { // 光照阴影
                       main: {
                           color: 'rgb(200,200,200)', // 光照颜色
                           intensity: 1.2, // 光照强度
                           shadowQuality: 'high',
                           shadow: true, // 是否显示阴影
                           alpha: 45,
                           beta: 45
                       },
                       ambientCubemap: {
                           diffuseIntensity: 1,
                           specularIntensity: 1
                       },
                       ambient: {
                           intensity: 0
                       }
                   }
               },
               series: [
                   {
                       name: 'scatter3D',
                       type: "scatter3D",
                       coordinateSystem: 'geo3D',
                       symbol: 'pin',
                       symbolSize: 28,
                       label: { // 标签的相关设置
                           show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                           distance: 0, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
                           //formatter:, // 标签内容格式器
                           formatter: function (params) {
                               if (true) {
                                   let str = ` ${params.name}\n 警报数: ${params.data.num} `
                                   return str;
                               }
                           },
   
                           textStyle: { // 标签的字体样式
                               color: '#333', // 地图初始化区域字体颜色
                               // fontWeight:"bold",
                               fontSize: 12, // 字体大小
                               // opacity: 1, // 字体透明度
                               height:34,
                               lineHeight:16,
                            //    textBorderWidth:4,
                            //    textShadowColor:'#fcf',
                            //    textShadowOffsetX:0,
                            //    textShadowOffsetY:0,
                            //    textShadowBlur:4,
                               backgroundColor: 'rgba(255,255,255,.8)' // 字体背景色
                           },
                           emphasis: {
                               show: false,
   
                           }
                       },
                       itemStyle: {
                           opacity: 1,
                           borderWidth: 1.5,
                           borderColor: '#fff'//气泡边的颜色
                       },
   
                       data: data
                   },
   
               ]
           };
           
           window.addEventListener("resize",function(){     
            myChart.resize();
           });
        
           if (option) {
            console.log(myChart.setOption)
               myChart.setOption(option);    
           }
           setInterval(()=>{
            getmc().then(res=>{
                let option_=myChart.getOption()
                option_.series[0].data =res.map;
                myChart.setOption(option_);
               })       
           },time_)

    }


    function echarts_5(_rawData) {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('echart5'));
        run(_rawData)

        function run(_rawData) {
           
            let countries = ''
           
            _rawData.forEach((item, index) => {
                if (index != 0 && countries.indexOf(item[1]) == -1) countries += item[1] + ','
            })
          
            countries = countries.split(',')
            countries.pop()
            const datasetWithFilters = [];
            const seriesList = [];
            echarts.util.each(countries, function (country) {
                let datasetId = 'dataset_' + country;
                datasetWithFilters.push({
                    id: datasetId,
                    fromDatasetId: 'dataset_raw',
                    transform: {
                        type: 'filter',
                        config: {
                            and: [
                                { dimension: 'Year', gte: 1950 },
                                { dimension: 'Country', '=': country }
                            ]
                        }
                    }
                });
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    symbolSize: 5,
                    // showSymbol: false,
                    name: country,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                cap: 'round',
                                join: 'miter',
                                width: 2
                            }
                        }

                    },
                    endLabel: {
                        show: true,
                        color: 'inherit',
                        fontSize:11,
                        formatter: function (params) {
                            return params.value[1] + ': ' + params.value[0];
                        }
                    },
                    labelLayout: {
                        moveOverlap: 'shiftY'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    encode: {
                        x: 'Year',
                        y: 'Income',
                        label: ['Country', 'Income'],
                        itemName: 'Year',
                        tooltip: ['Income']
                    }
                });
            });
            option = {
                animationDuration: 5000,
                dataset: [
                    {
                        id: 'dataset_raw',
                        source: _rawData
                    },
                    ...datasetWithFilters
                ],
                // title: {
                //   text: 'Income of Germany and France since 1950'
                // },

                tooltip: {
                    order: 'valueDesc',
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    nameLocation: 'middle',

                },
                yAxis: {
                    // name: '数量',
                    axisLine: { show: true },
                    axisTick: { show: true },
                    splitLine: { show: false },
                    type: 'value',
                },
                grid: {
                    right: 40,
                    x: 60,
                    y: 20,
                    x2: 20,
                    y2: 20,
                    //   width:300,
                    borderWidth: 10
                },
                series: seriesList
            };
            myChart.setOption(option);
        }

        option && myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();

        });
        setInterval(()=>{
            getmc().then(res=>{
                echarts_5(res.lineData)
                // let option_=myChart.getOption()
                // console.log('测试',option_)
                // option_.series[0].data =res.lineData;
                // myChart.setOption(option_);
               })       
           },time_)

    }

    function echarts_4(_rawData) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('echart4'));
        function dataFormatter(obj) {
            let pList = [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ]
            let temp
            for (let x = 0; x < 3; x++) {
                let max = 0
                let sum = 0
                temp = obj[x]
                for (let i = 0, l = temp.length; i < l; i++) {
                    max = Math.max(max, temp[i])
                    sum += temp[i]
                    obj[x][i] = {
                        name: pList[i],
                        value: temp[i]
                    }
                }
                obj[x + 'max'] = Math.floor(max / 100) * 100
                obj[x + 'sum'] = sum
            }
            return obj
        }

        let itemStyle = {
            barBorderRadius: [15, 0],
            color: '#0084ff'
        }
        let dataType = dataFormatter(_rawData)
        option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    padding: 0,
                    autoPlay: true,
                    playInterval: 2000,
                    data: dataType.title,
                    left: 460,
                    right: 0,
                    top: 20,
                    bottom: 100,
                    orient: 'vertical',
                    lineStyle: {
                        color: '#179bf1'
                    },
                    label: {
                        color: '#fff'
                    },
                    checkpointStyle: {
                        color: '#01d8ff',
                        symbolSize: 10,
                        borderColor: 'rgba(1, 216, 255, 0.5)',
                        borderWidth: 5
                    },
                    controlStyle: {
                        show: false
                    },
                    itemStyle: {
                        borderColor: '#004b85',
                        borderWidth: 1,
                        shadowColor: 'rgba(1, 216, 225, 0.5)',
                        shadowBlur: 5
                    },
                    emphasis: {
                        label: {
                            color: '#01d8ff',
                            show: false
                        },
                        checkpointStyle: {
                            color: '#01d8ff',
                            borderColor: 'rgba(1, 216, 255, 0.5)',
                            borderWidth: 5
                        },
                        itemStyle: {
                            color: '#01d8ff',
                            borderColor: 'rgba(1, 216, 225, 0.5)',
                            borderWidth: 5
                        }
                    }
                },
                calculable: true,
                grid: {
                    top: '20%',
                    bottom: '10%'
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: {
                            interval: 0
                        },
                        data: [
                            '1月',
                            '2月',
                            '3月',
                            '4月',
                            '5月',
                            '6月',
                            '7月',
                            '8月',
                            '9月',
                            '10月',
                            '11月',
                            '12月'
                        ],
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#2867a8'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '次',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#2867a8'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '2020',
                        type: 'bar',
                        barWidth: 15,
                        legendHoverLink: true,
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff'
                        }
                    }
                ]
            },
            options: [
                {
                    series: [
                        {
                            data: dataType['0'],
                            itemStyle: itemStyle
                        }
                    ]
                },
                {
                    series: [
                        {
                            data: dataType['1'],
                            itemStyle: itemStyle
                        }
                    ]
                },
                {
                    series: [
                        {
                            data: dataType['2'],
                            itemStyle: itemStyle
                        }
                    ]
                }
            ]
        }

        myChart.setOption(option, true)

        window.addEventListener("resize", function () {
            myChart.resize();
        });
        setInterval(()=>{
            getmc().then(res=>{
                let option_=myChart.getOption()
                let data=dataFormatter(res.bar)
                
                console.log('what?',option_)
                option_.options['0'].data =data['0'];
                option_.options['1'].data =data['1'];
                option_.options['2'].data =data['2'];
                myChart.setOption(option_);
               })       
           },time_)


    }
    function echarts_6(_rawData) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('echart6'));

        let dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                //shadowBlur: 40,
                //shadowColor: 'rgba(40, 40, 40, 1)',
            }
        };
        let placeHolderStyle = {
            normal: {
                color: 'rgba(255,255,255,.05)',
                label: { show: false, },
                labelLine: { show: false }
            },
            emphasis: {
                color: 'rgba(0,0,0,0)'
            }
        };
        option = {
            color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
            tooltip: {
                show: true,
                formatter: "{a} : {c} "
            },
            legend: {
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 12,
                bottom: '3%',

                data:_rawData.title ,
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                }
            },

            series: [
                {
                    name: _rawData.title[0],
                    type: 'pie',
                    clockWise: false,
                    center: ['50%', '42%'],
                    radius: ['59%', '70%'],
                    itemStyle: dataStyle,
                    hoverAnimation: false,
                    data: [{
                        value: _rawData.data[0],
                        name: '01'
                    }, {
                        value: 20,
                        name: 'invisible',
                        tooltip: { show: false },
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: _rawData.title[1],
                    type: 'pie',
                    clockWise: false,
                    center: ['50%', '42%'],
                    radius: ['49%', '60%'],
                    itemStyle: dataStyle,
                    hoverAnimation: false,
                    data: [{
                        value: _rawData.data[1],
                        name: '02'
                    }, {
                        value: 30,
                        name: 'invisible',
                        tooltip: { show: false },
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: _rawData.title[2],
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    center: ['50%', '42%'],
                    radius: ['39%', '50%'],
                    itemStyle: dataStyle,
                    data: [{
                        value: _rawData.data[2],
                        name: '03'
                    }, {
                        value: 35,
                        name: 'invisible',
                        tooltip: { show: false },
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name:_rawData.title[3],
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    center: ['50%', '42%'],
                    radius: ['29%', '40%'],
                    itemStyle: dataStyle,
                    data: [{
                        value: _rawData.data[3],
                        name: '04'
                    }, {
                        value: 40,
                        name: 'invisible',
                        tooltip: { show: false },
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: _rawData.title[4],
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    center: ['50%', '42%'],
                    radius: ['20%', '30%'],
                    itemStyle: dataStyle,
                    data: [{
                        value: _rawData.data[4],
                        name: '05'
                    }, {
                        value: 50,
                        name: 'invisible',
                        tooltip: { show: false },
                        itemStyle: placeHolderStyle
                    }]
                },]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        setInterval(()=>{
            getmc().then(res=>{
                let option_=myChart.getOption()
                option_.series[0].data =res.barPie;
                myChart.setOption(option_);
               })       
           },time_)
    }
    function echarts_31(data) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('fb1'));

        const defaultPalette = [
            // '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
            '#5470c6',
            '#91cc75',
            '#fac858',
            '#ee6666',
            '#73c0de',
            '#3ba272',
            '#fc8452',
            '#9a60b4',
            '#ea7ccc'
        ];
        const radius = ['10%', '70%'];
        const pieOption = {
            series: [
                {
                    type: 'pie',
                    id: 'distribution',
                    radius: ['10%', '70%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 4,
                        borderColor: 'rgba(0,0,0,0)',
                        borderWidth: 4
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        fontWeight: '600',
                    },
                    universalTransition: true,
                    animationDurationUpdate: 5000,
                    data: data
                }
            ]
        };
        const pieOption2 = {
            series: [
                {
                    type: 'pie',
                    id: 'distribution',
                    radius: ['20%', '70%'],
                    itemStyle: {
                        borderRadius: 4,
                        borderColor: 'rgba(0,0,0,0)',
                        borderWidth: 4
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        fontWeight: '600',
                    },
                    universalTransition: true,
                    animationDurationUpdate: 5000,
                    data: data
                }
            ]
        };
        const parliamentOption = (function () {
            let sum = data.reduce(function (sum, cur) {
                return sum + cur.value;
            }, 0);
            let angles = [];
            let startAngle = -Math.PI / 2;
            let curAngle = startAngle;
            data.forEach(function (item) {
                angles.push(curAngle);
                curAngle += (item.value / sum) * Math.PI * 2;
            });
            angles.push(startAngle + Math.PI * 2);
            function parliamentLayout(startAngle, endAngle, totalAngle, r0, r1, size) {
                let rowsCount = Math.ceil((r1 - r0) / size);
                let points = [];
                let r = r0;
                for (let i = 0; i < rowsCount; i++) {
                    // Recalculate size
                    let totalRingSeatsNumber = Math.round((totalAngle * r) / size);
                    let newSize = (totalAngle * r) / totalRingSeatsNumber;
                    for (
                        let k = Math.floor((startAngle * r) / newSize) * newSize;
                        k < Math.floor((endAngle * r) / newSize) * newSize - 1e-6;
                        k += newSize
                    ) {
                        let angle = k / r;
                        let x = Math.cos(angle) * r;
                        let y = Math.sin(angle) * r;
                        points.push([x, y]);
                    }
                    r += size;
                }
                return points;
            }
            return {
                series: {
                    type: 'custom',
                    id: 'distribution',
                    label: {
                        show: true
                    },
                    data: data,
                    coordinateSystem: undefined,
                    universalTransition: true,
                    animationDurationUpdate: 3000,
                    renderItem: function (params, api) {
                        let idx = params.dataIndex;
                        let viewSize = Math.min(api.getWidth(), api.getHeight());
                        let r0 = ((parseFloat(radius[0]) / 100) * viewSize) / 2;
                        let r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2;
                        let cx = api.getWidth() * 0.5;
                        let cy = api.getHeight() * 0.5;
                        let size = viewSize / 50;
                        let points = parliamentLayout(
                            angles[idx],
                            angles[idx + 1],
                            Math.PI * 2,
                            r0,
                            r1,
                            size + 3
                        );
                        return {
                            type: 'group',
                            children: points.map(function (pt) {
                                return {
                                    type: 'circle',
                                    autoBatch: true,
                                    shape: {
                                        cx: cx + pt[0],
                                        cy: cy + pt[1],
                                        r: size / 2
                                    },
                                    style: {
                                        fill: defaultPalette[idx % defaultPalette.length]
                                    }
                                };
                            })
                        };
                    }
                }
            };
        })();
        let currentOption = (option = pieOption);
        let time = 20000
        function fn() {
            currentOption = currentOption === pieOption ? parliamentOption : pieOption;
            myChart.setOption(parliamentOption);
            if (currentOption !== pieOption) {
                myChart.setOption(pieOption);
            } else {
                myChart.setOption(pieOption2);
            }

            setTimeout(fn, time)
        }
        fn()
        option && myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        setInterval(()=>{
            getmc().then(res=>{
                let option_=myChart.getOption()
                option_.series[0].data =res.pie;
                myChart.setOption(option_);
               })       
           },time_)

    }



})


















